<template>
  <div class="sj-form">
    <div class="submit-banner flex-box">
      <h4>送检信息已成功提交</h4>
    </div>
    <div class="submit-main">
      <dl>
        <dt class="flex-box"><p><span>01</span> 样本编号</p><button>修改</button></dt>
        <dd><div class="input-box flex-box">
            <p class="name">样本编号</p>
            <p class="desc">{{list.sampleNum}}</p>
          </div>
        </dd>
        <dd>
          <div class="input-box flex-box">
            <p class="name">受检者姓名</p>
            <p class="desc">{{list.sampleName}}</p>
          </div>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>02</span> 选择产品</p>
          <button>修改</button>
        </dt>
        <dd>
          <div class="input-box flex-box">
            <p class="name">您的产品</p>
            <p class="desc">{{list.productName}}</p>
          </div>
        </dd>
        <dd>
          <div class="input-box flex-box">
            <p class="name">检测内容</p>
            <p class="desc" v-on:click="showMoreDetail">点击<i>{{moreMsg}} </i>
              <span class="jiantou" v-bind:class="{ jiantouroate: showMore }"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use>
            </svg></span></p>
          </div>
          <transition name="fade-s">
            <div v-show="showMore">
              <ul v-show="ProductTypeThis === 1">
                <li class="input-box flex-box" v-for="(item, index) in childListData" :key="index">
                  <p class="name">{{item}}</p>
                </li>
              </ul>
              <ul v-show="ProductTypeThis === 2">
                <li class="input-box flex-box" v-for="(item, index) in adultListData" :key="index">
                  <p class="name">{{item}}</p>
                </li>
              </ul>
            </div>
          </transition>
        </dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>03</span> 样本信息</p>
          <button>修改</button>
        </dt>
        <dd><div class="input-box flex-box"><p class="name">样本类型</p><p class="desc">{{list.sampleType}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">采样日期</p><p class="desc">{{list.bloodDate}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">送检单位</p><p class="desc">{{list.customerCode}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">送检日期</p><p class="desc">{{list.createDate}}</p></div></dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>04</span> 个人信息</p>
          <button>修改</button>
        </dt>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">父亲姓名</p><p class="desc">{{list.fatherName}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">父亲身份证号码</p><p class="desc">{{list.fatherIdCard}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">年龄</p><p class="desc">{{list.fatherAge}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">民族</p><p class="desc">{{list.fatherNation}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">籍贯</p><p class="desc">{{list.fatherNativePlace}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">母亲姓名</p><p class="desc">{{list.motherName}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">母亲身份证号码</p><p class="desc">{{list.motherIdCard}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">年龄</p><p class="desc">{{list.motherAge}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">民族</p><p class="desc">{{list.motherNation}}</p></div></dd>
        <dd v-show="ProductTypeThis === 1"><div class="input-box flex-box"><p class="name">籍贯</p><p class="desc">{{list.motherNativePlace}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">联系电话</p><p class="desc">{{list.phoneNum}}</p></div></dd>
        <dd v-show="list.address!=''"><div class="input-box flex-box"><p class="name">通讯地址</p><p class="desc">{{list.address}}</p></div></dd>
        <dd v-show="list.email!=''" ><div class="input-box flex-box"><p class="name">电子邮箱</p><p class="desc">{{list.email}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">受检者姓名</p><p class="desc">{{list.sampleName}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">性别</p><p class="desc">{{list.gender==="1"?"女":"男"}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">籍贯</p><p class="desc">{{list.nation}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">出生日期</p><p class="desc">{{list.birthDate}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">年龄</p><p class="desc">{{list.sampleAge}}</p></div></dd>
      </dl>
      <dl>
        <dt class="flex-box">
          <p><span>05</span> 个人病史</p>
          <button>修改</button>
        </dt>
        <dd><div class="input-box flex-box"><p class="name">是否有家族遗传病史</p><p class="desc">{{list.zherc===0?"无":"有"}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.zhercDesc"><p class="name">遗传病史描述</p><p class="desc">{{list.zhercDesc}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">是否有异常疾病表现</p><p class="desc">{{list.zpreviousHistory===0?"无":"有"}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.otherDiseasesHistory"><p class="name">疾病表现描述</p><p class="desc">{{list.otherDiseasesHistory}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">父母是否近亲结婚</p><p class="desc">{{list.zintermarry===0?"否":"是"}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.zconsanguinity"><p class="name">亲缘关系</p><p class="desc">{{list.zconsanguinity}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">临床表现</p><p class="desc">{{list.clinicalManifestation===0?"无":"有"}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.clinicalManifestationDescription"><p class="name">临床表现描述</p><p class="desc">{{list.clinicalManifestationDescription}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">受检者类型</p><p class="desc">{{sjzType[list.personType]}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.sjzType"><p class="name">其它类型描述</p><p class="desc">{{list.sjzType}}</p></div></dd>
        <dd><div class="input-box flex-box"><p class="name">癌症类型</p><p class="desc">{{cancerType[list.cancerType]}}</p></div></dd>
        <dd><div class="input-box flex-box" v-if="list.cancerTypeOtherDesc"><p class="name">其它描述</p><p class="desc">{{list.cancerTypeOtherDesc}}</p></div></dd>
      </dl>
    </div>
    <div class="shaoma-footer flex-box">
      <router-link to="/sjlists"><button class="commit active">返回</button></router-link>
    </div>
  </div>
</template>
<script>
import stepBar from "@/components/StepBar.vue";

export default {
  data() {
    return {
      ProductTypeThis: "",
      list: "",
      showMore: false,
      sjzType: ["表现正常人群", "其它", "确证患者", "疑似患者"],
      cancerType: [
        "无",
        "非小细胞肺癌",
        "小细胞肺癌",
        "恶性胸膜间皮瘤",
        "结直肠癌",
        "胃癌",
        "胰腺癌",
        "肝胆癌",
        "食道癌",
        "肛门癌",
        "甲状腺癌",
        "胸腺癌/胸腺瘤",
        "默克尔细胞癌",
        "神经内分泌肿瘤",
        "非黑色素瘤皮肤癌",
        "中枢神经系统肿瘤",
        "肾癌",
        "前列腺癌",
        "卵巢癌",
        "宫颈癌",
        "阴茎癌",
        "外阴癌",
        "膀胱癌",
        "子宫肿瘤",
        "睾丸癌",
        "骨癌",
        "乳腺癌",
        "软组织肉瘤",
        "头颈癌",
        "黑色素瘤",
        "其它"
      ],
      moreMsg: "展开",
      // eslint-disable-next-line
      childListData: ["儿童常见遗传疾病", "儿童个体化用药", "个体特征", "基因ID", "祖源"],
      // eslint-disable-next-line
      adultListData: ["成人常见遗传疾病", "成人个体化用药", "遗传性肿瘤", "祖源", "个体特征"]
    };
  },
  components: {
    stepBar
  },
  computed: {},
  filters: {},
  methods: {
    showMoreDetail() {
      this.showMore = !this.showMore;
      if (this.showMore === true) {
        this.moreMsg = "收起";
      } else {
        this.moreMsg = "展开";
      }
    }
  },
  mounted() {
    // console.log(this.$route.params.Id);
    $.ajax({
      type: "POST",
      dataType: "JSON",
      data: { sampleNum: this.$route.params.Id },
      url:
        this.$API.api +
        "/report/?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=getInfoBySample",
      success: result => {
        console.log(result);
        this.ProductTypeThis = Number(result.productType);
        this.list = result;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  .submit-banner {
    width: 100%;
    height: r(72);
    background: url(../assets/img/form-submit-banner.png);
    background-size: 100%;
    h4 {
      font-size: r(18);
      color: #fff;
      letter-spacing: r(0.56);
      line-height: r(32);
    }
  }
  .submit-main {
    max-width: 750px;
    margin: 0 auto;
    dl {
      width: 100%;
      border-top: 1px solid #eee;
      border-top-width: r(15);
      padding-bottom: r(30);
      dt {
        width: 100%;
        height: r(72);
        padding-left: r(15);
        padding-right: r(15);
        box-sizing: border-box;
        background: #fff;
        justify-content: space-between;
        p {
          font-size: r(16);
          color: #717276;
          span {
            font-size: 22px;
            color: #53b4f9;
          }
        }
        button {
          border: 1px solid #53b4f9;
          border-radius: r(6);
          width: r(73);
          height: r(32);
          background: none;
          font-size: r(16);
          color: #53b4f9;
          opacity: 0;
        }
      }
      dd {
        padding-left: r(15);
        padding-right: r(15);
        box-sizing: border-box;
        .input-box {
          justify-content: space-between;
          color: #717276;
          .name {
            font-size: r(16);
          }
          .desc {
            font-size: r(14);
            .jiantou {
              transition: 0.25s ease;
              display: inline-block;
              transform: rotate(-90deg);
            }
            .jiantouroate {
              transform: rotate(90deg);
            }
          }
        }
        ul {
          padding-top: r(12);
          overflow: hidden;
          li.input-box {
            font-size: r(14);
            height: r(42);
            color: #999;
            border-bottom: none;
          }
        }
        .fade-s-enter-active,
        .fade-s-leave-active {
          transition: all 0.35s;
          height: auto;
          padding-top: r(12);
        }
        .fade-s-enter,
        .fade-s-leave-to {
          opacity: 0;
          height: 0;
          padding-top: 0;
        }
      }
    }
  }
  .shaoma-footer {
    position: relative;
  }
}
</style>
